<template>
    <main class="container">
        <aside class="aside-box">
            <div class="nav-list">
                <router-link class="nav-item" to="/">
                    <i class="home-icon"></i>
                    <span>游戏</span>
                </router-link>
                <router-link class="nav-item" to="/book">
                    <i class="book-icon"></i>
                    <span>库</span>
                </router-link>
                <router-link class="nav-item" to="/help">
                    <i class="help-icon"></i>
                    <span>帮助</span>
                </router-link>
            </div>
        </aside>
        <section class="main-box">
            <header class="header-box">
                <div class="search-box">
                    <input @keydown="onKeyDown" class="search-input" type="text" placeholder="请输入游戏名称搜索" />
                    <img class="search-icon" src="@/assets/image/search-icon.png" />
                </div>
                <div v-if="isLogin" class="user-box" @click="handleLogout">
                    你好 <button class="btn btn-login">退出</button>
                </div>
                <div v-else class="user-box" @click="showLogin">
                    <img class="me-icon" src="@/assets/image/me-icon.png" alt="">
                </div>
            </header>
            <section class="container-box" ref="mainRef">
                <router-view></router-view>
            </section>
        </section>
        <div class="login-dialog" v-if="visibleDialog">
            <div class="login-dialog-content">
                <div class="dialog-title">{{ isLoginTab ? '登录' : '注册' }}</div>
                <div class="dialog-form">
                    <div class="dialog-form-item" v-if="!isLoginTab">
                        <img class="input-icon" src="../assets/image/icon/user.png" />
                        <input v-model="loginForm.name" class="input" type="text" placeholder="请输入姓名" />
                    </div>
                    <div class="dialog-form-item">
                        <img class="input-icon" src="../assets/image/icon/phone.png" />
                        <input v-model="loginForm.mobile" maxlength="11" class="input" type="text"
                            placeholder="请输入手机号" />
                    </div>
                    <div class="dialog-form-item">
                        <img class="input-icon" src="../assets/image/icon/pwd.png" />
                        <input v-model="loginForm.password" class="input" type="password" placeholder="请输入密码" />
                    </div>
                    <div class="dialog-form-item" v-if="isLoginTab">
                        <img class="input-icon" src="../assets/image/icon/code.png" />
                        <div style="flex: 1; display: flex; align-items: center;">
                            <input v-model="loginForm.code" class="input input-code" type="text" placeholder="请输入验证码" />
                            <img @click="changeUuid" class="img-code" :src="imageUrl" />
                        </div>
                    </div>
                    <div class="dialog-form-item" style="justify-content: center;">
                        <button class="btn btn-login" @click="handleLogin">{{ isLoginTab ? '登录' : '注册' }}</button>
                        <button class="btn" @click="handleClose">取消</button>
                    </div>
                    <div class="check-wrap">
                        <div @click="isChecked = !isChecked">
                            <img v-if="!isChecked" class="check-icon" src="../assets/image/icon/check.png" />
                            <img v-else class="check-icon" src="../assets/image/icon/checked.png" />
                        </div>
                        <span class="text" @click="goAgreementPage">勾选既视为同意<i class="a-link">《风靡游戏服务协议》</i></span>
                    </div>
                    <p class="login-tips" @click="isLoginTab=!isLoginTab">{{ isLoginTab ? '还没有账户，请注册！' : '已有账户，请登录！' }}
                    </p>
                </div>
            </div>
        </div>
    </main>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, onMounted, watch, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useChangeLogin, useHandleLogin } from '../store' 
import { doLogin, doRegister } from '../api/index'
import { getUuid } from '../utils/index'
const mainRef = ref(null)
const visibleDialog = ref(false)
const isChecked = ref(false)
const loginTypeNum = useHandleLogin()
const loginForm = ref({
    mobile: '',
    password: '',
    name: '',
    code: ''
})  
const isLogin = useChangeLogin()
const isLoginTab = ref(true)
const uuid = ref(getUuid())
// const imageUrl = ref('http://localhost:7000/api/user/captcha/digit?uuid=')
const router = useRouter()

watch(() => loginTypeNum.value, (val) => {
    if (val === 2) {
        visibleDialog.value = true
        isLogin.value = false
    }
})
const imageUrl = computed(() => {
    return `http://localhost:7000/api/user/captcha/digit?uuid=${uuid.value}`
})

const goAgreementPage = () => {
    visibleDialog.value = false
    isLoginTab.value = false
    isChecked.value = false
    router.push({
        name: 'Agreement'
    })
}

const onKeyDown = (e) => {
    if (e.keyCode === 13) {
        if (e.target.value) {
            router.push({
                name: 'search',
                query: {
                    title: e.target.value
                }
            })
        }
    }
}
const handleLoginResult = (data, str) => {
    ElMessage.success(str)
    isLogin.value = true
    loginTypeNum.value = 1
    visibleDialog.value = false
    window.localStorage.setItem('token', data.data)
    window.localStorage.setItem('userRule', 'admin')
    window.localStorage.setItem('userInfo', JSON.stringify(data))
}
const handleLogoutResult = () => {
    ElMessage.success('退出成功')
    loginTypeNum.value = 1
    isLogin.value = false
    visibleDialog.value = false
    window.localStorage.removeItem('token')
    window.localStorage.removeItem('userRule')
    window.localStorage.removeItem('userInfo')
}
const showLogin = () => {
    loginForm.value = {
        mobile: '',
        password: '',
        name: ''
    }
    isLoginTab.value = true
    visibleDialog.value = true
}
const handleClose = () => {
    visibleDialog.value = false
    isLoginTab.value = false
    loginTypeNum.value = 1
}
const handleLogin = async () => {
    try {
        if (!isChecked.value) {
            ElMessage.warning('请选勾选同意协议！')
            return
        }
        const params = { ...loginForm.value }
        if (isLoginTab.value) {
            delete params.name
            if (!params.mobile) {
                ElMessage.warning('请输入手机号码！')
                return
            }
            if (!params.password) {
                ElMessage.warning('请输入密码！')
                return
            }
            if (!params.code) {
                ElMessage.warning('请输入验证码！')
                return
            }
            params.uuid = uuid.value
            const res = await doLogin({ ...params })
            if (!res.code) {
                handleLoginResult(res, '登录成功！')
            }
        } else {
            delete params.code
            if (!params.name) {
                ElMessage.warning('请输入姓名！')
                return
            }
            if (!params.mobile) {
                ElMessage.warning('请输入手机号码！')
                return
            }
            if (!params.password) {
                ElMessage.warning('请输入密码！')
                return
            }
            const res = await doRegister({ ...params })
            if (!res.code) {
                isLoginTab.value = true
                ElMessage.success('注册成功，请登录')
            }
        }
    } catch (error) {
        console.log(error);
    }
}
const handleLogout = async () => {
    ElMessageBox({
        title: '提示',
        message: '是否退出登录?',
        type: 'warning',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        showCancelButton: true
    }).then(() => {
        handleLogoutResult()
    })
}
const changeUuid = () => {
    uuid.value = getUuid()
}
onMounted(() => {
    const token = window.localStorage.getItem('token')
    if (token) {
        isLogin.value = true
    }
})
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    width: 100vw;
    height: 100vh;
    .check-wrap {
        width: 100%;
        display: flex;
        padding: 10px 0;
        align-items: center;
        justify-content: center;
        .check-icon {
            width: 22px;
            height: 22px;
            margin-right: 5px;
            cursor: pointer;
        }
        .a-link {
            color: #3907a4;
            text-decoration: underline;
            cursor: pointer;
            font-style: normal;
        }
    }
    .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 30px;
        border: none;
        background-color: #ccc;
        color: #fff;
        border-radius: 5px;
        line-height: 30px;
        padding: 0;
        cursor: pointer;
        &.btn-login {
            background-color: #3907a4; 
        }
        &:last-child {
            margin-left: 15px;
        }
    }
    .login-dialog {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, .5);
        z-index: 999;
        .login-dialog-content {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 400px;
            background: #fff;
            border-radius: 5px;
            padding-bottom: 25px;
        }
        .dialog-title {
            padding: 15px 0;
            text-align: center;
            font-size: 22px;
            font-weight: 600;
        }
        .dialog-form {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .dialog-form-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            width: 240px;
            &:last-child {
                margin-bottom: 0;
            }
            .input-icon {
                width: 20px;
                height: 20px;
                margin-right: 10px;
            }
            .input {
                height: 35px;
                border: 1px solid #ccc;
                border-radius: 5px;
                padding-left: 10px;
                outline: none;
                width: 200px;
                &.input-code {
                    width: 100px;
                    margin-right: 8px;
                }
            }
            
        }
        .login-tips {
            text-align: center;
            color: #3907a4;
            font-size: 12px;
            text-decoration: underline;
            cursor: pointer;
        }
    }
    .img-code {
        width: 100px;
        height: 40px;
    }
    .aside-box {
        width: 80px;
        height: 100%;
        border-right: 1px solid #ccc;
        .nav-list {
            padding-top: 60px;
            width: 32px;
            margin: 0 auto;
            .nav-item {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 32px;
                margin-bottom: 10px;
                &.router-link-exact-active {
                    margin-bottom: 28px;

                    .home-icon {
                        background-image: url('~@/assets/image/game-active-icon.png');
                    }
                    .book-icon {
                        background-image: url('~@/assets/image/book-active-icon.png');
                    }
                    .help-icon {
                        background-image: url('~@/assets/image/help-active-icon.png');
                    }
                    &::before {
                        position: absolute;
                        content: '';
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: -10px;
                        width: 35px;
                        height: 4px;
                        background: #3907a4;
                        border-radius: 2px;
                    }
                    span {
                        color: #3907a4;
                        font-weight: bold;
                    }
                }
                i {
                    font-style: normal;
                    width: 32px;
                    height: 32px;
                    background: url('~@/assets/image/game-icon.png') no-repeat;
                    background-size: 32px 32px;
                    margin-bottom: 5px;
                }
                .book-icon {
                    background-image: url('~@/assets/image/book-icon.png');
                }
                .help-icon {
                    background-image: url('~@/assets/image/help-icon.png');
                }
                span {
                    font-size: 12px;
                    color: #555;
                }
            }
        }
    }
    .main-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        .header-box {
            height: 60px;
            width: 100%;
            border-bottom: 1px solid #ccc;
            display: flex;
            padding: 0 60px;
            align-items: center;
            justify-content: space-between;
            .search-box {
                position: relative;
                width: 400px;
                margin: 0 auto;
                .search-input {
                    display: block;
                    width: 400px;
                    height: 40px;
                    padding-left: 10px;
                    border: 1px solid #ccc;
                    border-radius: 10px;
                }
                .search-icon {
                    position: absolute;
                    right: 15px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 25px;
                    height: 25px;
                }
            }
            .user-box {
                display: flex;
                align-items: center;
                cursor: pointer;
                white-space: nowrap;
            }
            .me-icon {
                width: 30px;
                height: 30px;
            }
        }
        .container-box {
            flex: 1;
            width: 100%;
            overflow-y: auto;
        }
    }
}
</style>, onMountedgetUuid, , computed